<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		请输入组员昵称：<input type="text" name="username" id="username">
		<input type="button" id="ct" value="继续添加">
		<input type="button" id="over" value="完成添加">
		<br>
		您添加的组员昵称如下：
		<div id="display"></div>
		
		<script>
			
			//定义一个变量 用来存储要添加的名字
			let names = document.getElementById('display').innerText;
			let ct = document.getElementById('ct');
			//给继续添加绑定onclick
			ct.onclick = function(){
			
				//获取文档框的内容
				let addName = document.getElementById('username').value.trim();
				
				if (addName.length == 0) {//判断内容是否为空
					alert('您输入的名字不能为空或者空格')
				} else if(addName.includes(',') || addName.includes('，')){//判断内容是否包含逗号
					alert('您输入的名字不能包含中文或英文逗号')
				} else if(names.includes(addName)){//判断内容是否已经存在了
					alert('名字已经存在');
				} else{//添加到名字中
					names += ` ${addName.italics()  } <br/>`;
				}	
			}
				
			
			let over = document.getElementById('over');
			//给完成添加绑定onclick
			over.onclick = function(){
				//将添加的名字输出到div中
				document.getElementById('display').innerHTML = names;
			}
				
			
		</script>
	</body>
</html>